<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>空气质量数据可视化</title>
    <!-- 引入Plotly库 -->
    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <style>
        /* 导航栏样式 */
        nav {
            background-color: #2c3e50;
            padding: 15px 20px;
        }
        nav a {
            color: white;
            text-decoration: none;
            margin-right: 20px;
            font-size: 16px;
        }
        nav a:hover {
            color: #3498db;
        }
        .active {
            border-bottom: 2px solid #3498db;
        }

        /* 图表容器样式 */
        .chart-container {
            max-width: 1200px;
            margin: 30px auto;
            padding: 0 20px;
        }
        .chart-title {
            text-align: center;
            color: #333;
            margin-bottom: 40px;
        }
        .chart-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }
        .chart-box {
            height: 400px;
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .chart-3d {
            grid-column: 1 / 3; /* 3D图占满整行 */
            height: 500px;
        }

        /* 响应式调整 */
        @media (max-width: 768px) {
            .chart-grid {
                grid-template-columns: 1fr;
            }
            .chart-3d {
                grid-column: 1;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav>
        <a href="../index.html">首页</a>
        <a href="cities.html">城市列表</a>
        <a href="chart.html" class="active">数据可视化</a>
        <a href="login.html" id="userLink">登录</a>
    </nav>

    <!-- 图表内容 -->
    <div class="chart-container">
        <h2 class="chart-title">城市空气质量数据分析</h2>
        
        <div class="chart-grid">
            <!-- 折线图：AQI变化趋势 -->
            <div class="chart-box" id="lineChart"></div>
            
            <!-- 饼图：污染物占比 -->
            <div class="chart-box" id="pieChart"></div>
            
            <!-- 3D散点图：AQI与环境因素关系 -->
            <div class="chart-box chart-3d" id="scatter3DChart"></div>
        </div>
    </div>

    <script>
        // 1. 验证用户登录状态
        const currentUser = JSON.parse(localStorage.getItem('currentUser'));
        if (currentUser) {
            document.getElementById('userLink').textContent = `欢迎 ${currentUser.username}`;
        }

        // 2. 准备空气质量数据（模拟近7天北京数据）
        const airQualityData = [
            { date: '2024-06-01', aqi: 78, pm25: 42, pm10: 25, ozone: 18, temp: 26, humidity: 65 },
            { date: '2024-06-02', aqi: 85, pm25: 48, pm10: 28, ozone: 22, temp: 27, humidity: 62 },
            { date: '2024-06-03', aqi: 65, pm25: 35, pm10: 20, ozone: 15, temp: 24, humidity: 70 },
            { date: '2024-06-04', aqi: 92, pm25: 55, pm10: 30, ozone: 25, temp: 29, humidity: 58 },
            { date: '2024-06-05', aqi: 60, pm25: 30, pm10: 18, ozone: 12, temp: 23, humidity: 72 },
            { date: '2024-06-06', aqi: 72, pm25: 38, pm10: 22, ozone: 16, temp: 25, humidity: 68 },
            { date: '2024-06-07', aqi: 88, pm25: 50, pm10: 26, ozone: 24, temp: 28, humidity: 60 }
        ];

        // 3. 绘制折线图（AQI变化趋势）
        const lineTrace = {
            x: airQualityData.map(item => item.date),
            y: airQualityData.map(item => item.aqi),
            type: 'scatter',
            mode: 'lines+markers',
            name: 'AQI指数',
            line: { color: '#e74c3c', width: 3 },
            marker: { size: 8, color: '#c0392b' }
        };
        const lineLayout = {
            title: '北京近7天AQI变化趋势',
            xaxis: { title: '日期', showgrid: false },
            yaxis: { 
                title: 'AQI值', 
                range: [0, 150], // AQI合理范围
                showgrid: true,
                gridcolor: '#f1f1f1'
            },
            paper_bgcolor: 'rgba(0,0,0,0)',
            plot_bgcolor: 'rgba(0,0,0,0)'
        };
        Plotly.newPlot('lineChart', [lineTrace], lineLayout);

        // 4. 绘制饼图（污染物占比，取最新一天数据）
        const latestData = airQualityData[airQualityData.length - 1];
        const pieTrace = {
            labels: ['PM2.5', 'PM10', '臭氧'],
            values: [latestData.pm25, latestData.pm10, latestData.ozone],
            type: 'pie',
            hole: 0.3, // 环形图效果
            marker: {
                colors: ['#3498db', '#2ecc71', '#f39c12']
            },
            textinfo: 'label+percent', // 显示标签和百分比
            insidetextorientation: 'radial'
        };
        const pieLayout = {
            title: '主要污染物占比（最新数据）',
            paper_bgcolor: 'rgba(0,0,0,0)'
        };
        Plotly.newPlot('pieChart', [pieTrace], pieLayout);

        // 5. 绘制3D散点图（AQI与温度、湿度关系）
        const scatter3DTrace = {
            x: airQualityData.map(item => item.aqi),
            y: airQualityData.map(item => item.temp),
            z: airQualityData.map(item => item.humidity),
            mode: 'markers',
            type: 'scatter3d',
            marker: {
                size: 10,
                color: airQualityData.map(item => item.aqi), // 颜色随AQI值变化
                colorscale: 'RdYlBu', // 红-黄-蓝配色
                colorbar: { title: 'AQI值' }
            }
        };
        const scatter3DLayout = {
            title: 'AQI与温度、湿度的关系',
            scene: {
                xaxis: { title: 'AQI指数' },
                yaxis: { title: '温度(℃)' },
                zaxis: { title: '湿度(%)' }
            },
            paper_bgcolor: 'rgba(0,0,0,0)'
        };
        Plotly.newPlot('scatter3DChart', [scatter3DTrace], scatter3DLayout);
    </script>
</body>
</html>